<template>
  <div class="app-container">
    <!-- <div class="notice">
      <h4>操作日志</h4>
      <span>系统操作日志</span>
    </div> -->
    <div class="wrap">
      <div class="filter-container">
        <div class="filter-content" :class="{ 'border-bottom': !moreSearchIf }">
          <div class="searchif" :class="{ height: moreSearchIf }">
            <el-row>
              <el-col :span="8">
                <div class="search-item">
                  <label>日志编号：</label>
                  <el-input v-model="query.logNumber" clearable placeholder="请输入日志编号" />
                </div>
              </el-col>
              <el-col :span="8">
                <div class="search-item">
                  <label>用户编号：</label>
                  <el-input v-model="query.logOpername" clearable placeholder="请输入用户编号" />
                </div>
              </el-col>
              <el-col :span="8">
                <div class="search-item">
                  <label>操作时间：</label>
                  <el-date-picker
                    v-model="query.logOperTime"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <div class="search-item">
                  <label>操作类型：</label>
                  <el-select v-model="query.logOperatorType" placeholder="请选择操作类型" clearable>
                    <el-option label="其它" value="0" />
                    <el-option label="新增" value="1" />
                    <el-option label="修改" value="2" />
                    <el-option label="删除" value="3" />
                  </el-select>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="search-item">
                  <label>系统模块：</label>
                  <el-input v-model="query.logTitle" clearable placeholder="请输入系统模块" />
                </div>
              </el-col>
              <el-col :span="8">
                <div class="search-item">
                  <label>操作状态：</label>
                  <el-select v-model="query.logStatus" placeholder="请选择操作状态" clearable>
                    <el-option label="正常" value="0" />
                    <el-option label="异常" value="1" />
                  </el-select>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="btngroup">
            <el-button
              class="filter-item redBtn"
              type="primary"
              size="mini"
              icon="el-icon-search"
              @click="search"
            >
              查询
            </el-button>
            <el-button
              class="reset-item"
              type="primary"
              size="mini"
              icon="el-icon-refresh"
              @click="reset"
            >
              重置
            </el-button>
          </div>
        </div>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list1"
        header-cell-class-name="table-header-cell"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        max-height="600"
      >
        <el-table-column align="center" label="日志编号">
          <template slot-scope="scope">{{ scope.row.logNumber }}</template>
        </el-table-column>
        <!-- <el-table-column label="用户编号" align="center">
          <template slot-scope="scope">{{ scope.row.userNumber }}</template>
        </el-table-column> -->
        <el-table-column label="操作类型" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.logOperatortype | ddd }}</span>
          </template>
        </el-table-column>
        <el-table-column label="系统模块" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.logTitle }}</span>
          </template>
        </el-table-column>
        <el-table-column label="请求方式" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.logMethod }}</span>
          </template>
        </el-table-column>
        <el-table-column label="IP" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.logOperip }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.logStatus | logSt }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | getNewTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button class="blueString" type="text" size="mini" @click="getDetails(scope.row.id)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          :total="total"
          layout="total, prev, pager, next, jumper"
          :current-page="paging.pageNo"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-dialog title="日志详情" :visible.sync="dialogTableVisibleDetails">
      <div class="logDetails">
        <el-row>
          <el-col :span="3">操作模块：</el-col>
          <el-col :span="21">{{ dioLiist.logTitle }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">请求地址：</el-col>
          <el-col :span="21">{{ dioLiist.logOperurl }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">登陆信息：</el-col>
          <el-col :span="21">{{ dioLiist.logOpername }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">操作方法：</el-col>
          <el-col :span="21">{{ dioLiist.logMethod }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">请求参数：</el-col>
          <el-col :span="21">{{ dioLiist.logOperparam }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">返回参数：</el-col>
          <el-col :span="21">{{ dioLiist.logJsonresult }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">操作状态：</el-col>
          <el-col :span="21">{{ dioLiist.logStatus | logSt }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">操作时间：</el-col>
          <el-col :span="21">{{ dioLiist.createTime }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">异常信息：</el-col>
          <el-col :span="21">
            {{ dioLiist.logErrormsg | dateTimeFormatter }}
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getauditLogList, getLogDetails } from '@/api/operationLog/index'
  import { dateToMs } from '@/utils/time'

  export default {
    filters: {
      getNewTime(value) {
        if (typeof value === 'undefined') {
          return ''
        } else {
          const date = new Date(parseInt(value))
          const y = date.getFullYear()
          let MM = date.getMonth() + 1
          MM = MM < 10 ? '0' + MM : MM
          let d = date.getDate()
          d = d < 10 ? '0' + d : d
          let h = date.getHours()
          h = h < 10 ? '0' + h : h
          let m = date.getMinutes()
          m = m < 10 ? '0' + m : m
          let s = date.getSeconds()
          s = s < 10 ? '0' + s : s
          return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
        }
      },
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger',
        }
        return statusMap[status]
      },
      ddd(val) {
        if (val === 0) {
          return '其他'
        } else if (val === 1) {
          return '新增'
        } else if (val === 2) {
          return '修改'
        } else {
          return '删除'
        }
      },
      logSt(e) {
        if (e === 0) {
          return '正常'
        } else {
          return '异常'
        }
      },
    },
    data() {
      return {
        dialogTableVisibleDetails: false,
        list: null,
        isMore: true,
        currentPage: 1, // 默认当前页
        timeValue: '',
        listLoading: true,
        hasMOre: false,
        moreSearchIf: false,
        showItem: true, // 是否展开
        record: '',
        // 筛选数据
        query: {
          releasedTimeEnd: '',
          releasedTimeStart: '',
          logNumber: '',
          logOpername: '',
          logOperTime: '',
          logOperatorType: '',
          logTitle: '',
          logStatus: '',
        },
        listDelite: {},
        // 表格数据
        list1: [],
        dioLiist: {},
        paging: {
          pageNo: 1,
          pageSize: 10,
        },
        total: 0,
      }
    },
    computed: {},
    created() {},
    mounted() {
      /**
       * 收起搜索
       */
      this.$nextTick(function () {
        this.getLogList()
      })
    },
    methods: {
      getLogList() {
        if (this.query.logOperTime === '') {
          delete this.query.releasedTimeStart
          delete this.query.releasedTimeEnd
        } else {
          this.query.releasedTimeStart = dateToMs(this.query.logOperTime[0])
          this.query.releasedTimeEnd = dateToMs(this.query.logOperTime[1])
          delete this.query.logOperTime
        }
        getauditLogList({ auditLogVo: { ...this.query }, ...this.paging }).then(response => {
          this.listLoading = false
          this.list1 = response.records
          this.paging.pageSize = response.pageSize
          this.paging.pageNo = response.pageNo
          this.total = response.total
        })
      },
      search() {
        this.listLoading = true
        this.getLogList()
      },
      reset() {
        this.query = this.$options.data().query
      },
      // 获取日志详情信息
      getDetails(id) {
        getLogDetails(id).then(response => {
          this.dialogTableVisibleDetails = true
          this.dioLiist = response
        })
      },
      handleSizeChange(val) {
        this.paging.pageSize = val
        this.getLogList()
      },
      handleCurrentChange(val) {
        this.paging.pageNo = val
        this.getLogList()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .addBox {
    width: 100%;
    margin-top: 35px;
    margin-bottom: 15px;

    .addNews {
      min-width: 92px;
      font-size: 14px;
      color: #f56c6c;
      text-align: center;
      background: none;
      border: 1px solid #f56c6c;

      b {
        margin-right: 8px;
        font-size: 16px;
        font-weight: 800;
      }
    }
  }

  .notice {
    padding: 5px 25px 15px;
    margin: 0 0 25px 0;
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 4px;
  }

  .wrap {
    padding: 5px;
    background: #fff;
    border-radius: 4px;
  }

  .notice h4 {
    font-weight: 700;
    color: #666;
  }

  .notice span {
    font-size: 14px;
    color: #666;
  }

  .app-container {
    padding: 0;
    background: #f3f4f8;

    .blueString {
      color: #409eff;
    }

    .blueString:hover {
      color: #40aeff;
      text-decoration: none;
    }
  }

  .el-table th,
  .el-table .has-gutter tr {
    padding: 10px;
    background: #f2f2f2;
  }

  .el-table td,
  .el-table th {
    padding: 10px 12px;
  }

  .el-row {
    margin-left: 6px;
    line-height: 40px;
  }

  .el-dialog {
    width: 680px;
  }

  .el-table {
    margin-top: 10px;
  }

  .searchBox {
    width: 100%;
  }

  .logDetails {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }

  .searchLeft {
    float: left;
    width: 80%;
  }

  .searchRight {
    float: right;
    width: 20%;
  }

  .filter-container {
    position: relative;
    padding-bottom: 60px;

    .filter-item {
      display: inline-block;
      min-width: 65px;
      padding: 10px;
      margin-bottom: 10px;
      vertical-align: middle;
      background: #f56c6c;
      border: none;
    }

    .reset-item {
      display: inline-block;
      min-width: 65px;
      padding: 10px;
      margin-bottom: 10px;
      margin-left: 10px;
      color: #333;
      vertical-align: middle;
      background: none;
      border: 1px solid #ddd;
    }

    .dropdown-item {
      display: inline-block;
      min-width: 65px;
      margin-bottom: 10px;
      vertical-align: middle;
    }

    &::before {
      position: relative;
      display: block;
      width: 10px;
      height: 46px;
      content: '';
    }

    .filter-content {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      z-index: 1;
      display: flex;
      background: #fff;

      &.border-bottom {
        border-bottom: 1px solid #eee;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
      }

      div {
        flex: 1 1;

        &.searchif {
          // overflow: hidden;
          position: relative;
          padding-right: 20px;

          .moreico {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1;
          }

          .search-item {
            display: inline-block;
            display: flex;
            padding-left: 10px;
            font-size: 14px;
            color: #333;
            justify-content: center;

            label {
              display: inline-block;
              margin-bottom: 10px;
              font-weight: normal;
              line-height: 40px;
              text-align: right;
              vertical-align: middle;
            }

            .el-input__inner {
              height: 32px;
              line-height: 32px;
            }

            & > span {
              flex: 1;
            }
          }
        }

        &.btngroup {
          text-align: right;
          flex: 0 0 260px;
          align-content: flex-end;

          .redBtn {
            background: #d12f1f;
          }

          .redBtn:hover {
            background: #e34f2f;
          }
        }
      }
    }
  }

  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #f56c6c;
  }

  /* 设置xx条/页的框的颜色 */
  .el-select .el-input.is-focus .el-input__inner,
.el-pagination__sizes .el-input .el-input__inner:hover,
/*设置当前页码的样式，及鼠标移上其他页码时的样式,以及左右箭头鼠标移上的样式*/
.el-pager li.active,
.el-pager li:hover,
.el-pagination button:hover {
    color: #f56c6c;
  }

  /* 设置当前选中的“xx条/页”的样式，是点击以后弹出来的框里的 */
  .el-pagination {
    margin-right: 20px;
    font-weight: 700;
    color: #303133;
    text-align: right;
    white-space: unset;
    align-content: flex-end;
  }
</style>
